import * as React from 'react';
import {
    TouchableOpacity,
    StyleSheet,
    Text,
    View,
} from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'
import Teleplay from './Teleplay'
import Movie from './Movie'
import theme from '../../config/theme'

const Tab = createMaterialTopTabNavigator()

// @ts-ignore
function ListViewCard({ navigation }) {
    return (
        <View style={styles.container}>
            <View style={styles.navigatorBar}>
                <TouchableOpacity>
                    <Ionicons name="chevron-back" color="#ffffff" size={26}/>
                </TouchableOpacity>
                <Text style={{fontSize: 18, color: "#ffffff"}}>片库</Text>
                <TouchableOpacity onPress={() => navigation.navigate('SearchHot')}>
                    <Ionicons name="search" color="#ffffff" size={26}/>
                </TouchableOpacity>
            </View>
            <Tab.Navigator initialRouteName="Teleplay" tabBarOptions={{
                inactiveTintColor: theme.mainFontColor,
                activeTintColor: theme.mainBackgroundColor,
                showLabel: true,
                labelStyle: {fontSize: 15},

                indicatorStyle: {
                    borderRadius: 20,
                    height: 2,
                    backgroundColor: theme.mainBackgroundColor,
                    width: "5%",
                    left: "22.4%"
                }
            }}>
                <Tab.Screen key="Teleplay" name="Teleplay" component={Teleplay} options={{
                    tabBarLabel: "剧集"
                }}/>
                <Tab.Screen key="Movie" name="Movie" component={Movie} options={{
                    tabBarLabel: "电影"
                }}/>
            </Tab.Navigator>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.whiteColor
    },
    navigatorBar: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingVertical: 10,
        paddingHorizontal: 10,
        backgroundColor: theme.mainBackgroundColor

    }
})

export default ListViewCard
